import { Link, useNavigate } from 'react-router-dom'
import {
  Table,
  Tag,
  Space,
  Card,
  Breadcrumb,
  Form,
  Button,
  Radio,
  DatePicker,
} from 'antd'
import 'moment/locale/zh-cn'
import locale from 'antd/es/date-picker/locale/zh_CN'
import { EditOutlined, DeleteOutlined } from '@ant-design/icons'
import img404 from '@/assets/error.png'
import { useEffect, useRef } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { getArticleAction } from '@/store/actions/article'
//导入抽离频道组件
import Channel from '@/components/channel'

const { RangePicker } = DatePicker

// table配置(固定的=》不需要跟随状态变更)
// 优化文章状态的处理（枚举/数据字典）
const articleStatus = {
  0: { color: 'yellow', text: '草稿' },
  1: { color: '#ccc', text: '待审核' },
  2: { color: 'green', text: '审核通过' },
  3: { color: 'red', text: '审核失败' },
}

const Article = () => {
  const dispatch = useDispatch()

  useEffect(() => {
    // 获取所有文章数据
    dispatch(getArticleAction({}))
  }, [dispatch])

  // 2. 获取频道数据
  const {
    articleList,
    query: { total_count, page, per_page },
  } = useSelector((state) => state.article)
  // 使用useRef存储值=> 状态变化的情况下会留存数据，同时修改值不会自刷新
  let searchParams = useRef({})
  // 3. 分页功能 => 点击页码或每页条数切换都会触发回调
  const changePage = (page, pageSize) => {
    console.log('分页', page, pageSize, searchParams.current)
    // 查询指定条件的文章数据
    dispatch(
      getArticleAction({
        // 联动上边已经选择的搜索条件
        ...searchParams.current,
        page,
        per_page: pageSize,
      })
    )
  }
  // 4. 搜索功能
  const search = ({ status, channel_id, date }) => {
    // console.log('搜索文章的条件：')
    /**
     * 1. 获取搜索文章的条件：formData
     * 2. 使用formData的条件数据重新查询文章列表数据
     */
    // 组装查询条件参数(后台api需要的)
    const params = {
      channel_id,
      // 和分页参数联动
      page,
      per_page,
    }
    // 处理文章状态和时间格式
    // 1. 排除全部
    if (status !== -1) {
      params.status = status
    }
    // 2. 判断date是否存在 => !!date 判断date是否空 | null | undefined
    if (!!date) {
      params.begin_pubdate = date[0].format('YYYY-MM-DD')
      params.end_pubdate = date[1].format('YYYY-MM-DD')
    }
    // 存储搜索条件
    searchParams.current = params
    console.log('搜索文章的条件:', params, searchParams)
    dispatch(getArticleAction(params))
  }
  const nav = useNavigate()
  // 指定table列表每列数据展示什么
  const columns = [
    {
      title: '封面',
      dataIndex: 'cover',
      render: (cover) => {
        return (
          <img
            src={cover.images[0] || img404}
            width={200}
            height={150}
            alt=""
          />
        )
      },
    },
    {
      title: '标题',
      dataIndex: 'title',
      width: 220,
    },
    {
      title: '状态',
      dataIndex: 'status',
      // 文章状态：0-草稿，1-待审核，2-审核通过，3-审核失败
      render: (data) => (
        <Tag color={articleStatus[data].color}>{articleStatus[data].text}</Tag>
      ),
    },
    {
      title: '发布时间',
      dataIndex: 'pubdate',
    },
    {
      title: '阅读数',
      dataIndex: 'read_count',
    },
    {
      title: '评论数',
      dataIndex: 'comment_count',
    },
    {
      title: '点赞数',
      dataIndex: 'like_count',
    },
    {
      title: '操作',
      render: (row) => {
        // console.log('row:', row)
        return (
          <Space size="middle">
            <Button
              onClick={() => nav(`/publish/${row.id}`)}
              type="primary"
              shape="circle"
              icon={<EditOutlined />}
            />
            <Button
              type="primary"
              danger
              shape="circle"
              icon={<DeleteOutlined />}
            />
          </Space>
        )
      },
    },
  ]

  return (
    <div>
      {/* 1. 搜索 */}
      <Card
        title={
          <Breadcrumb separator=">">
            <Breadcrumb.Item>
              <Link to="/home">首页</Link>
            </Breadcrumb.Item>
            <Breadcrumb.Item>内容管理</Breadcrumb.Item>
          </Breadcrumb>
        }
        style={{ marginBottom: 20 }}>
        {/* 搜索表单 */}
        <Form onFinish={search} initialValues={{ status: -1 }}>
          {/* 条件1：文章状态 */}
          <Form.Item label="状态" name="status">
            <Radio.Group>
              <Radio value={-1}>全部</Radio>
              <Radio value={0}>草稿</Radio>
              <Radio value={1}>待审核</Radio>
              <Radio value={2}>审核通过</Radio>
              <Radio value={3}>审核失败</Radio>
            </Radio.Group>
          </Form.Item>

          {/* 条件2：文章频道 */}
          <Form.Item label="频道" name="channel_id">
            {/* 之前：这里放的Select组件，在表单下会自动做受控处理
                如何让Channel组件自动受控呢？
                Channel组件接收 value + onChange
            */}
            <Channel width={288.4} />
          </Form.Item>
          {/* 条件3：文章发布的日期 */}
          <Form.Item label="日期" name="date">
            <RangePicker locale={locale}></RangePicker>
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit">
              搜索
            </Button>
          </Form.Item>
        </Form>
      </Card>
      {/* 2. 文章列表 */}
      <Card title={`根据筛选条件共查询到 tatol 条结果：${total_count}`}>
        {/* 
          rowKey='id'
        */}
        <Table
          rowKey="id"
          columns={columns}
          dataSource={articleList}
          pagination={{
            total: total_count, // 总条数
            position: ['bottomRight'], // 位置
            current: page, // 当前页码
            pageSize: per_page, // 每页条数
            onChange: changePage, // 切页
          }}
        />
      </Card>
    </div>
  )
}

export default Article
